<template>
  <div id="app" class="cloth-freeze">
    <van-nav-bar left-arrow left-text="返回扫码" title="问题坯布-冻结" @click-left="backToIndexFn">
      <template slot="right">
        <van-button class="van-button-nav" plain type="primary" @click="showAddToFreezePopup = true">增加</van-button>
      </template>
    </van-nav-bar>

    <van-divider style="margin:0px;"></van-divider>

    <!-- 查询条件 -->
    <van-row>
      <van-col :span="4">
        <van-field size="large" v-model="queryParam.beginAt" style="font-size: 36px" label="开始时间:" label-align="right" readonly placeholder="点击选择时间" @click="showDatePicker = true" />
      </van-col>
      <van-col :span="4">
        <van-field size="large" v-model="queryParam.endAt" style="font-size: 36px" label="结束时间:" label-align="right" readonly placeholder="点击选择时间" @click="showDatePicker = true" />
      </van-col>
      <van-col :span="4">
        <van-field size="large" label="品名:" label-width="80" placeholder="输入品名" label-align="right" v-model="queryParam.designNo"></van-field>
      </van-col>
      <van-col :span="4">
        <van-field size="large" label="匹号:" label-width="80" placeholder="输入匹号" label-align="right" v-model="queryParam.designSeqNo"></van-field>
      </van-col>
      <van-col :span="4">
        <van-field size="large" label="坯布ID:" label-width="80" placeholder="输入坯布ID" label-align="right" v-model="queryParam.greyClothId"></van-field>
      </van-col>
      <van-col :offset="2" :span="2">
        <van-button style="height:35px;margin-top:5px;" type="info" @click="loadClothFreezeDataFn">查询</van-button>
      </van-col>
    </van-row>
    <van-calendar v-model="showDatePicker" :min-date="minDateFilter" type="range" @confirm="confirmDateFilterFn" />
    <van-divider style="margin:0px;"></van-divider>

    <!-- 数据表格 -->
    <div style="padding: 15px; height:77%;">
      <div>
        <van-row class="craft-row first" type="flex" justify="space-between" align="center">
          <van-col class="craft-row-col title designNo"><span>品名</span></van-col>
          <van-col class="craft-row-col title number"><span>匹号</span></van-col>
          <van-col class="craft-row-col title colorNo"><span>颜色</span></van-col>
          <van-col class="craft-row-col title number"><span>坯布ID</span></van-col>
          <van-col class="craft-row-col title userName"><span>操作人</span></van-col>
          <van-col class="craft-row-col title dateTime"><span>操作时间</span></van-col>
          <van-col class="craft-row-col title problemRemark"><span>问题描述</span></van-col>
          <van-col class="craft-row-col title userName"><span>撤销人</span></van-col>
          <van-col class="craft-row-col title dateTime"><span>撤销时间</span></van-col>
          <van-col class="craft-row-col title status"><span>状态</span></van-col>
          <van-col class="craft-row-col title opt"><span>操作</span></van-col>
<!--          <van-col class="craft-row-col title" style="flex: 0 0 17px;"></van-col>-->
        </van-row>
      </div>
      <div style="height: 94%; overflow: auto">
        <van-row class="craft-row" type="flex" justify="space-between" align="center" v-for="row in craftData" :key="row.id">
          <van-col class="craft-row-col designNo">
            <span> {{ row.designNo ? row.designNo : "&nbsp;"  }}</span>
          </van-col>
          <van-col class="craft-row-col number">
            <span> {{ row.designSeqNo ? row.designSeqNo : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col colorNo">
            <span> {{ row.colorNo ? row.colorNo : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col number">
            <span> {{ row.greyClothId ? row.greyClothId : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col userName">
            <span> {{ row.operatorName ? row.operatorName : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col dateTime">
            <span> {{ row.operateAt ? row.operateAt : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col title problemRemark">
            <span>{{ row.problemRemark ? row.problemRemark : "" }}</span>
          </van-col>
          <van-col class="craft-row-col userName">
            <span> {{ row.cancellerName ? row.cancellerName : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col dateTime">
            <span> {{ row.cancelAt ? row.cancelAt : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col status">
            <span> {{ row.status == 1 ? "待审核" : row.status == 2 ? "通过" : row.status == 3 ? "驳回" : "" }}</span>
          </van-col>
          <van-col class="craft-row-col opt">
            <van-button type="danger" style="height: 30px;line-height: 30px;" @click="delGreyClothFreezeFn(row)">删除</van-button>
          </van-col>
        </van-row>
      </div>
      <div>
        <van-pagination v-model="queryParam.pageNum" :total-items="queryParam.totalRow" :items-per-page="queryParam.pageSize" @change="pageChangedFn" />
      </div>
    </div>

    <!-- 新增弹窗 -->
    <van-popup round  v-model="showAddToFreezePopup" :close-on-click-overlay="false" class="login-popup__filter" :closeable="true" @closed="stopListenScanFn">
      <van-field v-model="problemRemark" style="margin-top:35px;" type="textarea" rows="5" label="问题描述" placeholder="请输入问题描述" maxlength="2048" show-word-limit></van-field>
      <div style="display: flex; justify-content: center; align-items: center;">
        <van-button style="margin: 10px 0px;" type="primary" text="扫码冻结" @click="addToFreezeFn"></van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { openWin } from "@/utils";
import dayjs from "dayjs";
import {addGreyClothFreeze, delGreyClothFreeze, loadClothFreezeData} from "@/views/cloth-freeze/main";

export default {
  name: "clothFreeze",
  data() {
    return {
      /* 扫码枪处理 */
      intervalFlag: false,
      code: "",
      lastTime: "",
      nextTime: "",
      lastCode: "",
      nextCode: "",

      /* 查询条件 */
      showDatePicker: false,
      minDateFilter: new Date(2022, 0, 31),
      queryParam: {
        beginAt: dayjs().subtract(1,"week").format('YYYY-MM-DD'),
        endAt: dayjs().add(1, "day").format('YYYY-MM-DD'),
        designNo: "",
        designSeqNo: "",
        greyClothId: "",
        pageNum: 1,
        pageSize: 15,
        totalRow: 0,
      },

      /* 冻结数据表格 */
      curCraftRowIndex: -1,
      craftData: [],

      /* 新增弹窗 */
      showAddToFreezePopup: false,
      problemRemark: "",
    };
  },
  watch: {
    intervalFlag() {
      const that = this;
      setTimeout(() => {
        that.intervalFlag = false;
      }, 2000);
    }
  },
  mounted() {
    let that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = () => {
        that.initFn(that);
      }
    }
  },
  methods: {
    initFn(that) {
      that.loginInfo = window.api.pageParam.loginInfo;
      // 监听页面消失的时候，关掉页面就可以了
      window.api.addEventListener({
        name: "viewdisappear",
      }, function () {
        window.removeEventListener("keydown", that.onClickKeydown);
        window.api.closeWin();
      });

      that.loadClothFreezeDataFn();
    },
    //回退上一页
    backToIndexFn() {
      openWin("index");
    },

    //增加冻结
    addToFreezeFn() {
      if(this.problemRemark == "") {
        this.$toast.fail("必须输入问题描述")
        return;
      }
      window.addEventListener("keydown", this.onClickKeydown);
      this.$toast({
        type: "loading",
        message: "请扫码",
        forbidClick: true,
        duration: 3000,
      });
    },
    //停止监听
    stopListenScanFn() {
      window.removeEventListener("keydown", this.onClickKeydown);
      this.loadClothFreezeDataFn();
    },
    // 扫码
    onClickKeydown(e) {
      const that = this;
      that.$toast.clear();
      const Toast = that.$toast({
        type: "loading",
        message: "二维码解析中",
        forbidClick: true,
        duration: 20000,
      });
      if (window.event) {
        // IE
        that.nextCode = e.keyCode;
      } else if (e.which) {
        // Netscape/Firefox/Opera
        that.nextCode = e.which;
      }
      if (e.which === 13) {
        if(!that.intervalFlag) {
          Toast.clear();
          let scanResult = that.code.replace(/Shift/g, "");    //扫码结果
          if (isNaN(Number(scanResult))) {
            that.$toast.fail("请扫落布码");
            return false;
          }
          //
          addGreyClothFreeze({
            greyClothId: scanResult,
            problemRemark: that.problemRemark
          }, () => {
            that.$toast.success("冻结成功, 请继续扫下一匹");
            setTimeout(() => {
              this.$toast({
                type: "loading",
                message: "请扫码",
                forbidClick: true,
                duration: 3000,
              });
            }, 1500)
          });

        } else {
          that.$toast.fail("扫码过于频繁");
        }

        that.code = "";
        that.lastCode = "";
        that.lastTime = "";
        return;
      }
      that.nextTime = new Date().getTime();
      if (!that.lastTime && !that.lastCode) {
        console.log("扫码开始。。。");
        that.code += e.key;
      }
      if (
          that.lastCode &&
          that.lastTime &&
          that.nextTime - that.lastTime > 500
      ) {
        // 当扫码前有keypress事件时,防止首字缺失
        console.log("防止首字缺失。。。");
        that.code = e.key;
      } else if (that.lastCode && that.lastTime) {
        console.log("扫码中。。。");
        that.code += e.key;
      }
      that.lastCode = that.nextCode;
      that.lastTime = that.nextTime;
    },

    //确认选中日历区间
    confirmDateFilterFn(date) {
      let that = this;
      that.showDatePicker = false;
      const [start, end] = date;
      that.queryParam.beginAt = dayjs(start).format("YYYY-MM-DD");
      that.queryParam.endAt = dayjs(end).format("YYYY-MM-DD");
    },
    //加载冻结数据
    loadClothFreezeDataFn() {
      let that = this;
      that.craftData.splice(0, that.craftData.length);
      loadClothFreezeData(that.queryParam, data => {
        that.queryParam.totalRow = data.totalRow;
        data.list.forEach(row => {
          that.craftData.push(row);
        });
      });

      /*let res = {"code":2000,"msg":"成功","data":{"totalRow":75,"pageNumber":1,"totalPage":5,"pageSize":15,"list":[{"cancellerName":"","designSeqNo":91,"greyClothId":30220,"cancellerId":0,"id":1002,"colorNo":"0999","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-30 09:59:49","problemRemark":"测试","designNo":"12314-圭-单面蜂窝呢","status":3},{"cancellerName":"","designSeqNo":110,"greyClothId":30223,"cancellerId":0,"id":1003,"colorNo":"0999","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-30 09:59:49","problemRemark":"测试","designNo":"12314-圭-单面蜂窝呢","status":3},{"cancellerName":"","designSeqNo":204,"greyClothId":3161,"cancellerId":0,"id":1074,"colorNo":"427","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:53:02","problemRemark":"测试下\n2\n3\n4发放","designNo":"211900-A-427双面呢","status":2},{"cancellerName":"","designSeqNo":202,"greyClothId":3025,"cancellerId":0,"id":1073,"colorNo":"427","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:48:33","problemRemark":"测试2\n3\n4 发达","designNo":"211900-A-427双面呢","status":2},{"cancellerName":"","designSeqNo":205,"greyClothId":2981,"cancellerId":0,"id":1072,"colorNo":"427","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:47:19","problemRemark":"测试问题先\n1\n2","designNo":"211900-A-427双面呢","status":2},{"cancellerName":"","designSeqNo":203,"greyClothId":3138,"cancellerId":0,"id":1071,"colorNo":"427","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:45:29","problemRemark":"测试问题先\n1\n2","designNo":"211900-A-427双面呢","status":2},{"cancellerName":"","designSeqNo":114,"greyClothId":3083,"cancellerId":0,"id":1024,"colorNo":"427","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-427双面呢","status":2},{"cancellerName":"","designSeqNo":101,"greyClothId":3761,"cancellerId":0,"id":1025,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":103,"greyClothId":3762,"cancellerId":0,"id":1026,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":105,"greyClothId":3763,"cancellerId":0,"id":1027,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":108,"greyClothId":3764,"cancellerId":0,"id":1028,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":111,"greyClothId":3765,"cancellerId":0,"id":1029,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":113,"greyClothId":3766,"cancellerId":0,"id":1030,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":116,"greyClothId":3767,"cancellerId":0,"id":1031,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2},{"cancellerName":"","designSeqNo":107,"greyClothId":3774,"cancellerId":0,"id":1032,"colorNo":"0","operatorId":4,"operatorName":"隔壁老王","operateAt":"2022-07-31 16:39:29","problemRemark":"测试\n1\n2\n啥问题","designNo":"211900-A-0双面呢","status":2}]}};
      if(res.code === 2000) {
        that.queryParam.totalRow = res.data.totalRow;
        res.data.list.forEach(row => {
          that.craftData.push(row);
        });
      }*/
    },
    //切换页码
    pageChangedFn() {
      let that = this;
      that.loadClothFreezeDataFn();
    },

    //删除 冻结数据
    delGreyClothFreezeFn(row) {
      let that = this;
      delGreyClothFreeze({
        id: row.id
      }, () => {
        that.$toast.success("操作成功");
        that.loadClothFreezeDataFn();
      });
    }
  }
};
</script>

<style lang="scss">
.cloth-freeze {
  position: relative;
  top: 0;
  //导航栏样式
  .van-nav-bar {
    height: 60px;
    .van-icon {
      width: 50px;
      height: 50px;
    }
    .van-nav-bar__right {
      margin-top: 5px;
    }
    .van-button-nav {
      font-size: 28px;
      width: 150px;
    }
  }

  //表格样式
  .craft-row {
    border-left: #323233 1px solid;
    line-height: 38px;
    height: 38px;
    &.selected {
      background-color: #e6a23c;
    }
    &.first {
      border-top: #323233 1px solid;
    }
    &.selected-cur {
      background-color: #e6a23c;
    }
  }
  .craft-row-col {
    text-align: center;
    font-size: large;
    height: 38px;
    overflow: hidden;
    flex: 1;
    border-right: #323233 1px solid;
    border-bottom: #323233 1px solid;
    &.title {
      font-weight: bolder;
    }
    &.designNo {
      flex: 0 0 180px;
    }
    &.dateTime {
      flex: 0 0 150px;
    }
    &.userName {
      flex: 0 0 80px;
    }
    &.colorNo {
      flex: 0 0 80px;
    }
    &.number {
      flex: 0 0 60px;
    }
    &.status {
      flex: 0 0 50px;
    }
    &.opt {
      flex: 0 0 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
